<template>
  <el-dialog :title="'员工角色关联'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form class="employee" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-transfer v-model="yesData" filterable :filter-method="filterMethod" :props="{key: 'roleId',label: 'roleName'}"
        :titles="['未关联角色', '已关联角色']" @change="handleChange" :button-texts="['到左边', '到右边']" :data="noData">
        <span slot-scope="{ option }">{{ option.sellerName }} - {{ option.roleName }}</span>

        </el-transfer>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        noData: [],
        yesData: [],
        visible: false,
        dataForm: {
          id: 0,
        },
        dataRule: {

        },
        filterMethod(query, item) {
          var str = item.roleName + item.sellerName
          return str.indexOf(query) > -1;
        }
      };
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          if (this.dataForm.id) {
            //查询该员工所属的角色权限
            this.$http({
              url: this.$http.adornUrl("/hotel/hotelselleremployee/roluList"),
              method: "get",
              params: this.$http.adornParams({
                id: this.dataForm.id,
              })
            }).then(({
              data
            }) => {
              console.log(data)
              if (data && data.code === 0) {
                this.noData = data.data.list
                this.yesData = data.data.roleIds
              } else {
                this.noData = [];
                this.yesData = [];
                this.$message.error(data.msg);
              }
              this.dataListLoading = false;
            });
          }
        });
      },
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      },
      // 表单提交
      dataFormSubmit() {
        this.$http({
          url: this.$http.adornUrl(
            `/hotel/hotelselleremployee/updateRole`
          ),
          method: "post",
          data: this.$http.adornData({
            id: this.dataForm.id || undefined,
            roleIds: this.yesData.join(",")
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                this.$emit("refreshDataList");
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
	.employee .el-transfer-panel{
        width: calc(100% / 2 - 80px);
  }
  .employee /deep/ .el-checkbox {
    width: 100%;
  }
  .employee /deep/ .el-transfer-panel {
    width: 240px;
  }

</style>
